<template>
  <div class="homeBox" ref="myChart"></div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import * as echarts from "echarts";
// import "echarts-gl";
// import 'echarts/lib'

export default {
  props: [],
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      list: "cate/list",
    }),
  },

  watch: {
    list:{
      handler() {
      //注释：这里也可以用id选择，
      //但是如果当你把echarts封装成公共组件的时候，并且再同一个页面多次调用的时候，
      //id选择会出现仅显示一个的bug，所以这里建议用ref来选择
      if(this.list.length > 0){
        let myChart = echarts.init(this.$refs.myChart);
      var option;

      var option = {
        title: {
          text: "商品分类",
          x: "center",
        },
        tooltip: {
          targget: "item",
        },
        legend: {
          data: ["数量"],
          x: "left",
        },
        xAxis: {
          type: "category",
          data: this.list.map((item) => item.catename),
        },
        yAxis: {
          name:"下级分类数量",
          type: "value",
        
        },
        series: [
          {
            name: "数量",
            data: this.list.map((item) =>
              item.children ? item.children.length : 0
            ),
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
      // option && myChart.setOption(option);
      }
    },
    deep: true,
    }
  },

  mounted() {
    this.reqList();

  },
  methods: {
    ...mapActions({
      reqList: "cate/reqList",
    }),
    
    
  },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.homeBox {
  width: 100%;
  height: 80%;
  // margin: auto;
  // margin-top: 30px;
  // background-color: chartreuse;
}
</style>